<template>
	<view>
		<view class="pd10 flex whiteBg bb" @tap="toggle">
			<view class="bold black sectionTitle" >
				<text class="myFont icon-triangle-left mr2 gray" :class="show ? 'myFont-triangle-down' : 'myFont-triangle-left'"></text> {{title}}
			</view>
			<view>
				<slot></slot>
			</view>
		</view>
		<block v-if="show">
			<slot name="content"></slot>
		</block>
	</view>
</template>

<script>
	export default {
		name : "collapser" ,
		props:{
			title : {
				type : String ,
				default : ""
			},
			isShow : {
				type : Boolean ,
				default : false 
			}
		},
		data() {
			return {
				show : false 
			};
		},
		watch:{
			isShow : {
				immediate : true ,
				handler(isShow){
					this.show = isShow ;
				}
			}
		},
		methods:{
			toggle : function(e){
				this.show = !this.show ;
			},
		}
	}
</script>

<style>

</style>
